<template>
  <div id="app">
    <router-view />
    <prompt></prompt>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import prompt from './components/prompt.vue'
export default {
  name: 'App',
  components: {
    prompt
  },
  data () {
    return {
      status: '',
      isFirst: false,
      name: 'App',
      timer: null,
      previous: null,
      token: ''
    }
  },
  // 监听器
  watch: {
    async $route (to, from) {
      // 263791
      // 餐饮门店  restaurant
      // 短视频   shortvideo
      // 雷达门店  radarstore
      // 装修  decorate
      // 名片  card
      let curTab = this.routesItem.isPayclassTab.isTab
      let isPayclassVideo = from.path.includes('payclass/editVideo')
      let id = isPayclassVideo ? from.query.class_id : 0
      let isTab = isPayclassVideo ? 'video' : 'course'
      if (curTab !== isTab) {
        this.changeRoutesItem({ key: 'isPayclassTab', val: { id, isTab } })
      }
      if (to.path === '/survey/index') {
        if (this.routesItem.tabbar && this.routesItem.tabbar.id > 0) return
        await Promise.all([this.remind(), this.mergeLocaleMessage()])
      }
    }
  },
  created () {
    this.mergeLocaleMessage()
  },
  mounted () {
    let that = this
    window.onresize = () => {
      that.fnThrottle(() => {
        let clientWidth = document.documentElement.clientWidth
        if (clientWidth < 1200) {
          that.$store.commit('handleAdSwitch', false)
        }
      }, 300)()
    }
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    ...mapMutations(['changePromptData', 'changeIsShowPrompt', 'changeRoutesItem']),
    async remind () {
      setTimeout(() => {
        this.token = sessionStorage.getItem('minitk')
        if (this.token) {
          this.$api.getAgentAuthStatus().then(res => {
            this.changePromptData(res.data)
            this.status = res.data.status
          })
        } else {
          this.remind()
        }
      }, 1000)
    },
    async mergeLocaleMessage () {
      let { data: tabbar } = await this.$api.returnJson()
      if (!tabbar.id) return
      this.changeRoutesItem({ key: 'tabbar', val: tabbar })
      this.changeRoutesItem({ key: 'diyID', val: tabbar.id })
      let zh = {
        menu: {}
      }
      let name = {
        1: '名片',
        2: '商城',
        3: '动态',
        4: '官网'
      }
      if (!tabbar.list || tabbar.list.length < 1) return
      tabbar.list.map(item => {
        if (item.name !== name[item.key]) {
          name[item.key] = item.name
        }
      })
      // 名片
      // zh.menu.BusinessCard = `${name[1]}`
      // zh.menu.CardSetting = `${name[1]}设置`
      // zh.menu.CardInfo = `${name[1]}信息`
      // zh.menu.CardManage = `${name[1]}管理`
      // zh.menu.StaffCard = `员工${name[1]}`
      // zh.menu.EditCard = `编辑${name[1]}`
      // 商城
      // zh.menu.Malls = `${name[2]}`
      // zh.menu.MallsManage = `${name[2]}管理`
      // zh.menu.MallsSet = `${name[2]}设置`
      // zh.menu.MallsBanner = `${name[2]}轮播图`
      // 动态
      // zh.menu.Dynamic = `${name[3]}`
      // zh.menu.DynamicSet = `${name[3]}设置`
      // zh.menu.DynamicManage = `${name[3]}管理`
      // zh.menu.EditOrdinary = `编辑普通${name[3]}`
      // zh.menu.EditLink = `编辑链接${name[3]}`
      // zh.menu.EditVideo = `编辑视频${name[3]}`
      // zh.menu.DynamicClassifySet = `${name[3]}分类设置`
      // 官网
      zh.menu.Website = `${name[4]}`
      zh.menu.WebsiteManage = `${name[4]}管理`
      zh.menu.WebSiteInfo = `${name[4]}信息`
      zh.menu.WebsiteColumn = `${name[4]}栏目`
      this.$i18n.mergeLocaleMessage('zh', zh)
    },
    fnThrottle (fn, delay, atleast) {
      let that = this
      return function () {
        let now = +new Date()
        if (!that.previous) that.previous = now
        if (atleast && now - that.previous > atleast) {
          fn()
          that.previous = now
          clearTimeout(that.timer)
        } else {
          clearTimeout(that.timer)
          that.timer = setTimeout(function () {
            fn()
            that.previous = null
          }, delay)
        }
      }
    }
  }
}
</script>

<style lang='scss'>
@import url('./style/reset.css');
@import url('./style/icon.css');
@import url('./style/base.css');
@import url('./style/diy.css');
@import url('./style/common.css');

.el-popover {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.8) !important;
  .popper__arrow::after {
    border-top-color: rgba(0, 0, 0, 0.8) !important;
    border-bottom-color: rgba(0, 0, 0, 0.8) !important;
  }
}

.el-select__tags {
  .el-tag--info:nth-child(1) {
    max-width: 70%;
    display: flex;
    align-items: center;
    .el-select__tags-text {
      max-width: 90%;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
